import ChartBase from "./chart-base";
import { deepClone, mergeObject } from "@/utils";

export default class MapScatter extends ChartBase {
  constructor() {
    super();
  }

  //基础描述
  _info = {
    name: "散点地图",
    type: "map-scatter",
    group: "map", // 图表分类
    component: "Map",
    icon: "tubiaowudi-24", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
      trigger: "item",
    },

    geo: {
      // 这个是重点配置区
      map: "china",
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      itemStyle: {
        areaColor: "#274d68",
        shadowColor: "#3A73C0",
        shadowOffsetX: 2,
        shadowOffsetY: 11,
        emphasis: {
          areaColor: "#2AB8FF",
          borderWidth: 0,
          color: "green",
          label: {
            show: false,
          },
        },
      },
      regions: [
        {
          name: "南海诸岛",
          opacity: 0,
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
          },
        },
      ],
    },
    series: [],
  };

  // 系列
  _defaultSeries = {};

  _defaultMapSeries = {
    type: "map",
    tooltip: {
      show: false,
    },
    zoom: 1.1,
    map: "china",
    roam: false,
    selectedMode: false, //取消点击后出现黄色高亮
    label: {
      show: true,
      textStyle: {
        color: "#000000",
      },
      emphasis: {
        textStyle: {
          color: "#000000",
        },
      },
      fontSize: 12,
    },

    itemStyle: {
      borderColor: "#93EBF8",
      borderWidth: 1,
      areaColor: "#274d68",
      emphasis: {
        areaColor: "#2EE5CE",
        borderWidth: 0.1,
      },
    },
  };

  _scatterDefaultSeries = {
    type: "effectScatter",
    tooltip: {
      show: true,
      trigger: "item",
    },
    coordinateSystem: "geo",
    showEffectOn: "render",
    rippleEffect: {
      brushType: "stroke",
    },
    hoverAnimation: true,
    itemStyle: {
      normal: {
        color: "#1DE9B6",
        shadowBlur: 10,
        shadowColor: "#1DE9B6",
      },
    },
    label: {
      position: "right",
      show: true,
    },
    zlevel: 1,
    data: [],
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "地区名称",
      key: "areaName",
      type: ["string"],
      limit: 1,
      description: "字段类型为「 字符类型 」",
      width: "50%",
    },
    {
      label: "地区经度",
      key: "long",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    {
      label: "地区纬度",
      key: "lat",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    {
      label: "详细信息",
      key: "nums",
      type: ["number"],
      limit: 1,
      description: "字段类型为「 数字类型 」",
      width: "50%",
    },
  ];

  //样式配置描述信息
  _styleOptionConfig = [
    {
      label: "地图配置",
      bindKeys: "_group.map",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "区域展示",
      bindKeys: "mapSeries.label.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "区域字体颜色",
      bindKeys: "mapSeries.label.textStyle.color",
      controlType: "color-picker",
      controlValue: "#000000",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "地图颜色",
      bindKeys: "mapSeries.itemStyle.areaColor",
      controlType: "color-picker",
      controlValue: "#3FA3EB",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线颜色",
      bindKeys: "mapSeries.itemStyle.borderColor",
      controlType: "color-picker",
      controlValue: "#93EBF8",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "高亮颜色",
      bindKeys: "mapSeries.itemStyle.emphasis.areaColor",
      controlType: "color-picker",
      controlValue: "#EFCA41",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "高亮字体颜色",
      bindKeys: "mapSeries.label.emphasis.textStyle.color",
      controlType: "color-picker",
      controlValue: "#000000",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "阴影颜色",
      bindKeys: "option.geo.itemStyle.shadowColor",
      controlType: "color-picker",
      controlValue: "#BDD3EF",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "散点配置",
      bindKeys: "_group.scatter",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "默认散点大小",
      bindKeys: "scatterSeries.scatterStyle.sizeAuto",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "散点名称展示",
      bindKeys: "scatterSeries.label.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "散点颜色",
      bindKeys: "scatterSeries.itemStyle.normal.color",
      controlType: "color-picker",
      controlValue: "#1DE9B6",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "散点提示框",
      bindKeys: "scatterSeries.tooltip.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "提示字体颜色",
      bindKeys: "scatterSeries.tooltip.textStyle.color",
      controlType: "color-picker",
      controlValue: "#606266",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "提示字体大小",
      bindKeys: "scatterSeries.tooltip.textStyle.fontSize",
      controlType: "slider",
      controlValue: 14,
      controlProps: {
        min: 12, // 最小值
        max: 18, // 最大值
        step: 1, // 步长
      },
      controlConfigs: {},
    },
  ];

  min = 2;
  max = 20;

  getOption({
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    let { option, mapSeries, scatterSeries } =
      this._transformStyleOptionConfig(styleOptionConfig);
    let defaultOption = deepClone(this._defaultOption);
    let mapDefaultSeries = deepClone(this._defaultMapSeries);
    let scatterDefaultSeries = deepClone(this._scatterDefaultSeries);

    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (mapDefaultSeries && mapSeries)
      mapDefaultSeries = mergeObject(mapDefaultSeries, mapSeries);
    if (scatterDefaultSeries && scatterSeries)
      scatterDefaultSeries = mergeObject(scatterDefaultSeries, scatterSeries);

    defaultOption.color = themeColor;

    // 定义散点
    if (this._info.component === "Map") {
      if (
        dataPoolField.long.length &&
        dataPoolField.lat.length &&
        dataPoolField.nums.length
      ) {
        let areaName = dataPoolField.areaName[0].fieldName,
          startLongField = dataPoolField.long[0].fieldName,
          startLatField = dataPoolField.lat[0].fieldName,
          nums = dataPoolField.nums[0].fieldName;

        scatterDefaultSeries.data = dataList.reduce((r, c) => {
          r.push({
            value: [
              parseFloat(c[startLongField]),
              parseFloat(c[startLatField]),
              c[nums],
            ],
            info: c[nums],
            areaName: c[areaName],
          });
          return r;
        }, []);

        if (dataList.length) {
          let sortData = dataList.sort((a, b) => {
            return a[nums] - b[nums];
          });

          let minValue = sortData[0][nums];
          let maxValue = sortData[sortData.length - 1][nums];

          //设置散点大小
          scatterDefaultSeries.symbolSize = (item) => {
            if (!scatterSeries.scatterStyle.sizeAuto) {
              return dataList.length > 1
                ? (item[2] / (maxValue - minValue)) * (this.max - this.min)
                : dataList.length > 0
                ? 10
                : 0;
            } else {
              return 10;
            }
          };
        }

        // 定义提示框样式
        scatterDefaultSeries.tooltip.formatter = (p) => {
          if (p.value.length) {
            return `${p.data.areaName}<br/>
                    ${nums}: ${
              p.value.length > 1 && p.value[2] ? p.value[2] : 0
            }`;
          }
        };

        //散点名称
        scatterDefaultSeries.label.formatter = (p) => {
          return `${p.data.areaName}`;
        };

        defaultOption.series.push({
          ...scatterDefaultSeries,
        });
      }
    }
    defaultOption.series.push({
      ...mapDefaultSeries,
    });

    return {
      mapOption: defaultOption,
    };
  }

  getClickData(event) {
    const { name, seriesType, value } = event;
    if (seriesType === "map") {
      return {
        label: name,
        value: name,
      };
    }
  }
}
